<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="digital-people-box">
                <div class="digital-people" v-show="isShow" @click="onSzrBtn">
                    <img class="szr-img" :src="_oss_ + 'images/szr_big.gif?x-oss-process=image/format,webp'" />

                    <div class="tips">
                        <img :src="_oss_ + 'images/tips.png'" />
                        <div class="btn"></div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
const route = useRoute();
const isShow = ref(false);
const userStore = useUserStore();

const onScroll = () => {
    if (
        route.name == "login" ||
        route.name == "register" ||
        route.name == "test" ||
        route.name == "caseView-id"
    )
        return;
    if (route.name == "home") {
        const systemCell = document.querySelector(".system-cell");
        const offsetTop = systemCell ? systemCell.offsetTop : 0;
        isShow.value =
            window.scrollY >= offsetTop / 2 &&
            document.documentElement.scrollHeight -
            (window.scrollY + window.innerHeight + 91 + 574 + 48 + 68) >
            0;
    } else {
        isShow.value =
            document.documentElement.scrollHeight -
            (window.scrollY + window.innerHeight + 574 + 48 + 68) >
            0;
    }
};

const onSzrBtn = () => {
    if (userStore.isLogin) {
        window.open("https://szr.yzpt8.com");
    } else {
        LoginModal(true, { url: "https://szr.yzpt8.com" }, {}, true);
    }
};

window.addEventListener("scroll", onScroll);

watch(
    () => route.path,
    () => {
        if (
            route.name == "home" ||
            route.name == "login" ||
            route.name == "register" ||
            route.name == "test" ||
            route.name == "caseView-id"
        ) {
            isShow.value = false;
        } else {
            isShow.value = true;
        }
    },
    {
        immediate: true,
    }
);
</script>
<style lang="scss" scoped>
.digital-people-box {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 98;
    width: 8.5vw;
    overflow: hidden;
    cursor: pointer;

    .digital-people {
        position: relative;
        width: 10vw;
        transform: translateX(-1vw);
    }

    .szr-img {
        display: block;
        width: 10vw;
        border: none;
        user-select: none;
        pointer-events: none;
        -webkit-backface-visibility: hidden;
    }

    .tips {
        position: relative;
        width: 6vw;
        position: absolute;
        left: 45%;
        bottom: 20%;
        transform: translateX(-50%);
        pointer-events: auto;

        img {
            width: 100%;
        }

        .btn {
            position: absolute;
            left: 6%;
            bottom: 10%;
            width: 5vw;
            height: 1.5vw;
            border-radius: 20px;
        }
    }
}
</style>
